<template>
	<z-paging @pageScroll="pageScroll" ref="paging" v-model="ltsList" @query="queryList">
		<u-sticky>
			<headsty :mrbot="'41'" searchStatus @transmit="getkeyword"
				:leftImg="'https://morgan.dingxians.cn/static/homes/2.png'"></headsty>
		</u-sticky>
		<view class="lunbo_box" style="background-image: url('https://morgan.dingxians.cn/static/homes/1.png');">
			<u-swiper radius="0" height="157" keyName="image" circular :list="swiperList"
				@click="swiperClick"></u-swiper>
		</view>
		<view class="xuze_box">
			<view class="dange_xuanzeanniu_box" v-for="(item, index) in anniuList" :key="index" @click="submit(item)">
				<image :src="item.image" mode="scaleToFill" />
			</view>
		</view>
		<view class="danbmu_box">
			<danmuList :toplist="danmuLists"></danmuList>
		</view>
		<view class="shangpintuijian_box">
			<view class="left_tuijianpic_biox">
				<image src="https://morgan.dingxians.cn/static/homes/8.png" mode="heightFix" />
			</view>
			<view class="chakangengduo_box"></view>
		</view>

		<view class="content_box">
			<view class="dange_box" v-for="(item, index) in ltsList" :key="index" @click="goDetail(item)">
				<view class="top_pic" style="background-image: url('https://morgan.dingxians.cn/static/homes/9.png');">
					<!-- <image :src="item.image" mode="scaleToFill" /> -->
					<easy-loadimage mode="scaleToFill" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
				</view>
				<view class="name_box">{{ item.name }}</view>
				<view class="price_box">{{ item.price }}元素</view>
			</view>
			<view v-for="i in 1" style="width: 316rpx;"></view>
		</view>
		<uni-popup class="popuphuodong" v-show="popData.length" v-for="(item, index) in popData" :key="item.id"
			:ref="'popup' + index">
			<image mode="widthFix" @click="$router(item.url)" class="pop_image" :src="item.image"></image>
			<image class="close_pop" @click.stop="closePop('popup' + index, index)"
				src="https://morgan.dingxians.cn/static/bonusgive/4.png">
			</image>
		</uni-popup>
	</z-paging>
</template>
<script>
	import headsty from '../../components/indexhead.vue'
	import danmuList from '../../components/danmuList.vue'
	export default {
		components: {
			headsty,
			danmuList
		},
		data() {
			return {
				keyword: '',
				anniuList: [{
						id: 7,
						image: 'https://morgan.dingxians.cn/upload/20241122/674019475fd37.png'
					},
					{
						id: 2,
						image: 'https://morgan.dingxians.cn/upload/20241119/673c0944557fb.png',
						url: '/uniPage/car'
					},
					{
						id: 1,
						image: 'https://morgan.dingxians.cn/static/2.png'
					},

					{
						id: 4,
						image: 'https://morgan.dingxians.cn/static/xin/21.png'
					},
					{
						id: 2,
						image: 'https://morgan.dingxians.cn/static/homes/5.png',
						url: '/uniPage/climbing'
					},

					{
						id: 6,
						image: 'https://morgan.dingxians.cn/upload/20241101/672499962c205.png'
					}

				],
				catId: 1,
				swiperList: [
					'https://yq.dingxians.cn/upload/20240918/66eaca03d729c.png'
				],
				ltsList: [],
				danmuLists: [],
				popData: [], // 活动弹窗
				scrollTop: 0
			}
		},
		onLoad(e) {
			// #ifdef MP-WEIXIN
			if (e.scene) {
				var bind_id = e.scene
				uni.setStorageSync("bind_id", bind_id)
			}
			this.getPopss()
			// #endif

		},
		onShow() {
			this.getbanner()
			this.getchallengeBoxBarrage()
		},
		methods: {
			// 监听滚动高度
			pageScroll(event) {
				this.scrollTop = event.detail.scrollTop;
			},
			getchallengeBoxBarrage() {
				this.$Request.get(this.$api.index.challengeBoxBarrage).then(res => {
					if (res.code == 200) {
						this.danmuLists = res.data.data
					}
				})
			},
			getbanner() {
				this.$Request.get(this.$api.index.banners).then(res => {
					if (res.code == 200) {
						this.swiperList = res.data
					}
				})
			},
			getkeyword(e) {
				this.keyword = e
				console.log(this.keyword)
			},
			swiperBtn(e) {
				console.log("123")
			},
			submit(item) {
				uni.setStorageSync('boxs', '')
				if (item.id != 2) {
					this.catId = item.id
					this.$refs.paging.reload()
				} else {
					this.$router(item.url)
				}
			},
			swiperClick(e) {
				console.log(e)
			}, // 活动弹窗
			getPopss() {
				this.$Request.get(this.$api.index.pops).then(res => {
					if (res.code == 200) {
						this.popData = res.data.data
						if (this.popData.length > 0) {
							this.$nextTick(() => {
								this.$refs.popup0[0].open('center')
							})
						}
					}
				})
			},
			// 关闭
			closePop(popup, index) {
				this.$refs[popup][0].close()
				let len = this.popData.length - 1;
				if (index < len) {
					let i = index + 1;
					let popup = `popup${i}`
					// setTimeout(() => {
					this.$refs[popup][0].open('center')
					// }, 500)
				}
			},
			goDetail(item) {
				uni.setStorageSync('boxs', '')
				this.$router('/homePage/indexDetail?id=' + item.id + '&catId=' + this.catId + '&boxs=' + '')
			},
			queryList(pageNo, pageSize) {
				let data = {
					cat_id: this.catId,
					page: pageNo,
					limit: 100
				}
				this.$Request.get(this.$api.index.challengeBox, data).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.data.data)
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	/deep/.u-swiper {
		background: rgba(255, 255, 255, 0) !important;
	}

	.lunbo_box {
		width: 100%;
		height: 319rpx;
		background-size: 100% 100%;
		margin-bottom: 36rpx;

	}

	.xuze_box {
		width: 100%;
		height: 108rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 43rpx;
		overflow: hidden;
		overflow-x: auto;

		.dange_xuanzeanniu_box {
			flex-shrink: 0;
			width: 200rpx;
			height: 108rpx;
			margin-right: 18rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.danbmu_box {
		width: 100%;
		height: 68rpx;
	}

	.shangpintuijian_box {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.left_tuijianpic_biox {
			height: 35rpx;

			image {
				height: 100%;
			}
		}

		.chakangengduo_box {}
	}

	.content_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		flex-wrap: wrap;

		.dange_box {
			width: 316rpx;
			height: 530rpx;
			margin-bottom: 27rpx;

			.top_pic {
				width: 310rpx;
				height: 380rpx;
				margin-bottom: 20rpx;
				background-size: 100% 100%;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.name_box {
				width: 100%;
				height: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 23rpx;
				margin-bottom: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price_box {
				width: 100%;
				height: 23rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 23rpx;
			}
		}
	}

	.popuphuodong {
		z-index: 1000;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: transparent;

		.pop_image {
			width: 600rpx;
		}

		.close_pop {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			bottom: -100rpx;
			left: 270rpx;

		}
	}
</style>